<template>
  <div @click="goToArticleDetail">
    <el-card class="hot-topic-item">
      <el-row>
        <el-col :span="20">
          <div class="hot-topic-left-wraper">
            <!-- 第一行标题 -->
            <el-row>
              <el-col :span="20">
                <div class="hot-topic-icon-index">
                  <div
                    class="hot-topic-icon"
                    :style="{
                      'background-image': `url(${
                        index < 3 ? hotRankPics[index] : hotRankPics[3]
                      })`,
                    }"
                  >
                    <span class="hot-topic-index">{{ index + 1 }}</span>
                  </div>
                  <div class="hot-topic-title">
                    {{ hotRankItem.content }}
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- 文本内容(话题榜) -->
            <div class="hot-topic-text" v-if="categoryIndex == 4">
              {{ "#" + hotRankItem.title + "#  " + hotRankItem.text }}
            </div>
            <!-- 其它榜 -->
            <div class="hot-other-wrap">
              <el-image
                :src="
                  userUrl(hotRankItem.avatar)
                    ? userUrl(hotRankItem.avatar)
                    : defalutAvatar
                "
                fit="fill"
              />
              <div class="name-brief-wrap">
                <div class="nickname">{{ hotRankItem.nickname || "匿名" }}</div>
                <div class="description">{{ userInfo.description }}</div>
              </div>
            </div>

            <!-- 热度值 -->、
            <div class="hot-topic-num">
              {{
                hotValue[categoryIndex].num +
                ":" +
                hotRankItem[hotValue[categoryIndex].value]
              }}
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="hot-topic-pic" v-if="hotRankItem.images.length">
            <!-- 单图布局 -->
            <template v-if="!hotRankItem.images[0].endsWith('.mp4')">
              <el-image
                :src="
                  userUrl(hotRankItem.images[0])
                    ? userUrl(hotRankItem.images[0])
                    : defalutAvatar
                "
                fit="fill"
              />
            </template>
            <template v-else>
              <!-- 视频 -->
              <video
                :src="userUrl(hotRankItem.images[0])"
                class="video"
                controls="controls"
              >
                您的浏览器不支持视频播放
              </video>
            </template>
          </div></el-col
        >
      </el-row>
    </el-card>
  </div>
</template>

<script>
import config from "@/config/index";
export default {
  props: ["hotRankItem", "categoryIndex", "index"],

  watch: {
    hotRankItem: {
      handler(newVal, oldVal) {
        if (newVal.id) {
          // 获取评论列表
          this.articleItem = newVal;

          this.getUserInfo();
          // console.log(this.articleItem);
        }
      },
      // 立即处理 进入页面就触发
      immediate: true,
    },
  },
  data() {
    return {
      // 默认头像
      defalutAvatar: config.defalutAvatar,
      // 图片展示失败默认图片
      defalutPic: config.defalutPic,
      // 热度图标
      hotRankPics: [
        require("../../assets/img/hotRank1.png"),
        require("../../assets/img/hotRank2.png"),
        require("../../assets/img/hotRank3.png"),
        require("../../assets/img/hotRankDefault.png"),
      ],
      // 热度值
      hotValue: [
        { num: "访问量", value: "viewCount" },
        { num: "收藏量", value: "collectionCount" },
        { num: "点赞量", value: "likeCount" },
        { num: "分享量", value: "forwardCount" },
        { num: "热度值", value: "hot" },
      ],
      // 用户信息
      userInfo: {},
    };
  },
  methods: {
    // 用户的头像(单张图片)
    userUrl(userUrl) {
      if (!userUrl) return null;
      // 用户的头像加地址前缀
      return config.defalutBaseURLPic + userUrl;
    },
    // 获取用户信息
    async getUserInfo() {
      const { code, msg, result } = await this.$http.get(
        "/api/user/user_info/" + this.hotRankItem.userId || ""
      );
      if (code != 200) return;
      this.userInfo = result;
      // console.log(this.userInfo);
    },
    // 跳转到文章详情
    goToArticleDetail() {
      if (this.categoryIndex != 4) {
        this.$router.push({
          path: "/comment",
          query: {
            id: this.hotRankItem.id,
          },
        });
      } else
        this.$router.push({
          path: "/hotRankArticleDetail",
        });
    },
  },
};
</script>

<style scoped lang="less">
.hot-topic-item {
  margin-bottom: 10px;
  padding-bottom: 20px;
  height: 130px;
  .hot-topic-left-wraper {
    .hot-topic-icon-index {
      width: 100%;
      display: flex;
      align-items: center;
      .hot-topic-icon {
        min-width: 50px;
        width: 50px;
        height: 32px;
        line-height: 32px;
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
        margin-right: 5px;

        //   margin-top: -5px;
        .hot-topic-index {
          color: white;
          font-weight: 500;
        }
      }
      .hot-topic-title {
        font-size: 18px;
        color: #333333;
        font-weight: 550;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .hot-topic-text {
      margin-top: 5px;
      font-size: 14px;
      color: #838383;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hot-other-wrap {
      display: flex;
      .el-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .name-brief-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: start;
        .nickname {
          text-align: left;
          font-size: 14px;
          font-weight: 550;
          color: #333;
        }
        .description {
          font-size: 14px;
          color: #838383;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .hot-topic-num {
      color: #939393;
      font-size: 12px;
      text-align: left;
    }
  }

  // 右侧图片
  .hot-topic-pic {
    width: 100%;
    margin-bottom: 20px;

    .el-image {
      border-radius: 10%;
      height: 100px;
    }

    .video {
      width: 80%;
    }
  }
}
</style>